<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#imgdiv {
				position: relative;
			}
			
			#imgdiv>div {
				position: absolute;
				width: 100%;
				height: 100%;
			}
			
			#imgdiv>div>img {
				width: 100%;
				height: 100%;
			}
			
			.cls {
				font-size: 50px;
				color: aquamarine
			}
			
			.cls.left {
				position: absolute;
				top: 100px;
			}
			
			.cls.right {
				position: absolute;
				top: 100px;
				left: 180px;
			}
		</style>
	</head>

	<body>
		<div id="imgdiv" style="width:200px;height: 200px;border:1px solid red">
			<div>
				<img src="img/2.jpg" />
			</div>
			<div>
				<img src="img/3.jpg" />
			</div>
			<div>
				<img src="img/4.jpg" />
			</div>
			<div>
				<img src="img/5.jpg" />
			</div>

		</div>
		<div id="" class="cls left" onclick = "leftbut()">
			&lt;
		</div>
		<div id="" class="cls right" onclick="rightbut()">
			&gt;
		</div>

		<script type="text/javascript">
			//			1.显示图片1，其余隐藏
			var imgs = document.getElementsByTagName("img");
			var vi = 0;
			f();
			//2.left按钮实现
function leftbut(){
	vi--;
	if(vi<0){
		vi=3;
	}
	f();
}
			//3.right按钮实现
function rightbut(){
	vi++;
	if(vi>3){
		vi=0;
	}
	f();
}
			function f() {
				for(var i = 0; i < imgs.length; i++) {
					if(i == vi) {
//						alert("test");
						imgs[i].style.display = "block";
						//		imgs[i].setAttribute("style","display:block;")//另一种方法
					} else {
						imgs[i].setAttribute("style", "display:none;")
						//		imgs[i].style.display="none";
					}
					console.log(imgs[i].src);
				}
			}
		</script>
	</body>

</html>